<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!--js一般放在head之间的，但实际上也可以放在别的位置。-->
    <script language="javascript">
        /**/
        function Mario() {
            this.x = 0;
            this.y = 0;
            //向上移动 0上 1右 2下 3左
            this.move = function (dir) {
                var mymario = document.getElementById('mymario');
                switch (dir) {//dir没有写居然影响下面marioMove中的输出
                    case 0:
                        //得到高度为 数值px
                        var top = mymario.style.top;
                        top = parseInt(top.substring(0, top.length - 2));
                        mymario.style.top = top - 10 + "px";
                        break;
                    case 1:
                        var left = mymario.style.left;
                        left = parseInt(left.substring(0, left.length - 2));
                        mymario.style.left = left + 10 + "px";
                        break;
                    case 2:
                        var top = mymario.style.top;
                        top = parseInt(top.substring(0, top.length - 2));
                        mymario.style.top = top + 10 + "px";
                        break;
                    case 3:
                        var left = mymario.style.left;
                        left = parseInt(left.substring(0, left.length - 2));
                        mymario.style.left = left - 10 + "px";
                        break;
                }
            }
        }

        //创建Mairo对象
        var mario = new Mario();

        //全局函数
        function marioMove(dir) {
            switch (dir) {
                case 0:
                    mario.move(dir);
                    break;
                case 1:
                    mario.move(dir);
                    break;
                case 2:
                    mario.move(dir);
                    break;
                case 3:
                    mario.move(dir);
                    break;
            }
        }

    </script>


</head>
<body>

<input type="button" value="====上====" onclick="marioMove(0)"/>
<input type="button" value="====右====" onclick="marioMove(3)"/>
<input type="button" value="====左====" onclick="marioMove(1)"/>
<input type="button" value="====下====" onclick="marioMove(2)"/>

<!--绝对定位-->
<img id="mymario" style="width:50px;height:50px;left:0px;top:100px;position:absolute;" src="z1.gif"/>
</div>


</body>
</html>